<template>

    <div class="syglobal">
        <div class="syg1" style="padding: 10px;box-sizing: border-box;">


            <div id="syg0"></div>
        </div>
        <div class="syg1" id="syg1"></div>

    </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, readonly, ref } from "vue";
import service from "../request/Request";
import * as echarts from 'echarts';
const lrid = ref();
const lrlist = ref([])
const selctold = (e) => {
    getchart0(e)
}
onMounted(() => {

    getchart0()
    getchart()
})

const getchart0 = async (e) => {

    const res = await service.post("/paper/popular");
    console.log(res)
    const syd = document.getElementById("syg0");
    const myChart = echarts.init(syd);
    // 绘制图表
    myChart.setOption({
        title: {
            text: '问卷浏览量'
        },
        tooltip: {},
        legend: {},
        xAxis: {
            data: res.data.x
        },
        yAxis: {},
        series: [{
            name: '浏览量',
            type: 'bar',
            data: res.data.y
        }]
    });
}
const getchart = async () => {
    const res = await service.get("/paper/use");
    console.log(res)
    const syd = document.getElementById("syg1");
    const myChart = echarts.init(syd);
    // 绘制图表
    myChart.setOption({
        title: {
            text: '问卷使用量'
        },
        tooltip: {},
        legend: {},
        xAxis: {
            data: res.data.x
        },
        yAxis: {},
        series: [{
            name: '使用量',
            type: 'bar',
            data: res.data.y
        }
        ]
    });
}
</script>
<style scoped>
.syg1 {
    width: 50%;
    height: 300px;
}

#syg0 {
    width: 100%;
    height: 300px;
}

.syglobal {
    width: 100%;
    height: 100%;
    background: #fff;

    display: flex;
    justify-content: space-between;
}
</style>